<template>
    <div class="common-layout">
        <el-container>
            <el-header height="100%">
                <HeaderView />
            </el-header>
            <el-main height="100%" style="background-color: #F5F5F5;">
                <div class="attractions-box">
                    <h1 style="margin: 0 auto; text-align: center; margin: 30px 0">不计划太多反而能勇敢冒险</h1>
                    <div v-if="!adventureStarted">
                        <div class="adventure-list">
                            <table class="adventure-table">
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>名称</th>
                                        <th>地址</th>
                                        <th>需要资金</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="adventure in adventures" :key="adventure.id">
                                        <td>{{ adventure.type }}</td>
                                        <td>{{ adventure.go.name }}</td>
                                        <td>{{ adventure.go.address }}</td>
                                        <td v-if="adventure.go.price">{{ adventure.go.price }}</td>
                                        <td v-if="adventure.go.ticketPrice != null">{{ adventure.go.ticketPrice }}</td>
                                        <td>
                                            <el-button style="background-color: #B01F24;border-color: #B01F24;"
                                                type="primary" @click="handleAdventure(adventure.id)">移除</el-button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="button-container">
                            <el-button type="primary" @click="startAdventure"
                                style="background-color: #B01F24;border-color: #B01F24;">
                                开启冒险之旅
                            </el-button>
                        </div>
                    </div>
                    <div v-else>
                        <div v-for="(adventure, index) in adventures" :key="index" class="adventure-detail">
                            <p style="text-align: center;">第 {{ index + 1 }} 站：去 {{ adventure.go.name }}，需要花费 {{
                                adventure.go.price || 0 }} 元，导航地址：{{ adventure.go.address }}</p>
                            <p style="text-align: center;" v-if="index != adventures.length - 1">
                                <svg style="width: 20px;height: 20px;" t="1739855377950" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4167"
                                    width="200" height="200">
                                    <path
                                        d="M512.213359 958.989357 63.594899 510.930645l84.024695-84.023672L448.20351 729.129202 448.20351 63.546292l127.940904 0L576.144414 729.129202l299.651684-302.222229 84.009346 84.023672L512.213359 958.989357z"
                                        p-id="4168"></path>
                                </svg>
                            </p>
                        </div>
                        <div style="text-align: center;margin: 20px 0;">
                            <el-button type="primary" @click="finishAdventure"
                                style="background-color: #B01F24;border-color: #B01F24;">
                                完结打卡
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer height="100%">
                <FooterView />
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import HeaderView from '@/view/HeaderView.vue';
import FooterView from '@/view/FooterView.vue';
import req from '@/utils/request';
import router from '@/router'; // 导入 router

export default {
    name: 'GoView',
    components: {
        HeaderView,
        FooterView
    },
    data() {
        return {
            adventures: [],
            adventureStarted: false // 控制冒险是否开始
        };
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        // 检查 localStorage 中是否存在 adventures
        const storedAdventures = localStorage.getItem(`adventures_${this.userInfo.uid}`);
        
        if (storedAdventures!="[]" && storedAdventures!=null) {
            this.adventures = JSON.parse(storedAdventures);
            this.adventureStarted = true; // 如果存在，则设置 adventureStarted 为 true
        } else {
            req.get("/go/getGos/" + this.userInfo.uid).then(res => {
                this.adventures = res.data;
            });
        }
    },
    methods: {
        removeElement(id){
            req.delete("/go/remove/" + id).then(res => {
            });
        },
        handleAdventure(adventureId) {
            req.delete("/go/remove/" + adventureId).then(res => {
                if (res.code === 200) {
                    // this.$message({
                    //     message: '删除成功',
                    //     type: 'success'
                    // });
                    location.reload();
                }
            });
        },
        startAdventure() {
            if (this.adventures.length === 0) {
                this.$message({
                    message: '内容为空',
                    type: 'warning'
                });
                return;
            }
            for (let i = 0; i < this.adventures.length; i++) {
                const element = this.adventures[i].id;
                this.removeElement(element);
                // console.log(element);
                
            }
            this.adventureStarted = true; // 开始冒险
            // 将 adventures 存储到 localStorage
            localStorage.setItem(`adventures_${this.userInfo.uid}`, JSON.stringify(this.adventures));
            this.$message({
                message: '冒险之旅已开启！',
                type: 'success'
            });
        },
        finishAdventure() {
            // for (let i = 0; i < this.adventures.length; i++) {
            //     this.handleAdventure(this.adventures[i].id);
            // }
            // // 清空 localStorage 中的 adventures
            localStorage.removeItem(`adventures_${this.userInfo.uid}`);
            // 跳转到种草页面
            router.push({ name: 'communication' });
        }
    }
}
</script>

<style scoped>
.attractions-box {
    width: 1200px;
    margin: 20px auto;
    background-color: white;
    min-height: 600px;
    padding-top: 52px;
    margin-top: 100px;
}

.adventure-table {
    width: 100%;
    border-collapse: collapse;
}

.adventure-table th,
.adventure-table td {
    border: none;
    padding: 10px;
    text-align: center;
}

.adventure-table th {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ccc;
}

.adventure-table tr {
    border-bottom: 1px solid #ccc;
}

.button-container {
    display: flex;
    justify-content: center;
    /* 居中对齐 */
    margin-top: 20px;
    /* 上边距 */
}

.adventure-detail {
    margin: 10px 0;
    /* 每个冒险详情的上下间距 */
}
</style>